<template>
	<view class="page index">
		<view class="form">
			<common-input
			  title="用户昵称" 
				placeholder="请填写用户昵称" 
				v-model="userInfo.nickname"
				:border-bottom="false"
				:require="false"
			>
			</common-input>
			<common-input
			  title="手机号码" 
				placeholder="请输入手机号码" 
				v-model="userInfo.mobile"
				:border-bottom="false"
				:require="false"
				length="11"
				type="tel"
			>
			</common-input>
			<common-input
			  title="用户邮箱" 
				placeholder="请输入用户邮箱" 
				v-model="userInfo.email"
				:require="false"
			>
			</common-input>
			<view class="text">
				<view class="title">
					性别
				</view>
				<radio-group @change="radioChange">
					<label class="radio"><radio value="1" :checked="userInfo.sex == 1" style="transform:scale(0.7)" />男</label>
					<label class="radio"><radio value="2" :checked="userInfo.sex == 2" style="transform:scale(0.7)" />女</label>
				</radio-group>
			</view>
		</view>
		<view class="footer">
			<button @click="save">编辑</button>
		</view>
	</view>
</template>

<script>
	import commonInput from "@/components/commonInput.vue";
	import updateFile from "@/components/updateFile.vue";
	import {updateUserProfile} from "@/api/system/user.js"
	export default{
		data() {
			return{
				userInfo: {}
			}
		},
		components: {
			commonInput,
			updateFile
		},
		created() {
			this.userInfo = getApp().globalData.userInfo;
		},
		methods:{
			radioChange(e){
				this.userInfo.sex = e.detail.value;
			},
			save(){
				uni.showLoading({
					mask: true,
					title: '加载中...'
				})
				updateUserProfile({
					nickname: this.userInfo.nickname,
					email: this.userInfo.email,
					mobile: this.userInfo.mobile,
					sex: this.userInfo.sex
				}).then(res => {
					uni.hideLoading();
					uni.showToast({
						icon: 'success',
						title: '修改成功'
					})
					getApp().globalData.userInfo = this.userInfo;
				}).catch(() => {
					uni.hideLoading();
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/common/style/customicons.scss";
	.index{
		padding: 24rpx 0;
		@include flex-c;
		.form{
			.text{
				// border-bottom: 4rpx #e5e5e5 solid;
				padding: 12rpx 30rpx;
				@include flex-r-start-center;
				.title{
					font-size: 28rpx;
					color: #101010;
					padding: 0 20rpx 16rpx 0;
					display: flex;
					align-items: center;
					// .require{
					//   height: 28rpx;
					//   width: 6rpx;
					//   background-color: #c24135;
					//   margin-left: 10rpx;
				 //  }
				}
			}
		}
		.notice{
			margin: 24rpx 30rpx;
			height: 52rpx;
			line-height: 52rpx;
			background-color: #DE868F;
			border-radius: 6rpx;
			color: #fff;
			font-size: 28rpx;
			padding: 0 30rpx;
		}
		.footer{
			margin: 300rpx 0 0;
			padding: 24rpx 30rpx;
			@include flex-r-between-start;
			button{
				@include button;
				color: #fff;
				height: 60rpx;
				width: 100%;
				background-color: #198AFA;
				line-height: 60rpx;
				font-size: 28rpx;
			}
		}
	}
</style>